<template>
  <div class="pageBox">
    <div class="top">
      <span class="inputList">用户名：<a-input placeholder="请输入" style="width: 200px" v-model="par.name"/></span>
      <span>注册日期：<a-range-picker @change="getDate"/></span>
      <span>
                <a-button type="primary" @click="getData">查询</a-button>
                <a-button @click="reset">重置</a-button>
            </span>
    </div>
    <div class="table">
      <a-table :pagination=show :dataSource="dataSource" :columns="columns">
        <!-- <template slot="operation" slot-scope="text, record">
            <a-button  type="primary" ghost>查看</a-button>
            <a-button  type="danger" ghost>删除</a-button>
        </template> -->
      </a-table>
    </div>
    <div class="paging">
      <div class="total">共 {{total}} 条记录 第 {{par.pageSize}} / {{allPage}} 页</div>
      <a-pagination
        v-show="page"
        showQuickJumper
        showSizeChanger
        :defaultCurrent="1"
        :defaultPageSize="par.limit"
        :total=total
        @change="onChange"
      />
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataSource: [],//数据列表
        total: null,//数据总条数
        show: false,
        page: false,
        columns: [{
          title: '用户名',
          dataIndex: 'name',
        },
          {
            title: 'IP',
            dataIndex: 'ip',
          },
          {
            title: '操作',
            dataIndex: 'message',
          },
          {
            title: '时间',
            dataIndex: 'create_date',
          },
        ],
        par: {
          pageSize: 1,
          limit: 10,
          start_date: '',
          end_date: '',
          name: ''
        },
        allPage: '',
      }
    },
    created() {
      this.getData()
    },
    methods: {
      //获取数据
      getData() {
        this.$ajax
          .get("/kmd-field-web/sys/logPage", {
            params: this.par,
          },)
          .then(res => {
            this.dataSource = res.data.records
            this.total = res.data.total
            this.allPage = Math.ceil(this.total / this.par.limit)
            if (this.allPage > 1) {
              this.page = true
            }
          })
      },
      onChange(pageNumber, limit) {// 分页跳转
        this.par.pageSize = pageNumber;
        this.par.limit = limit;
        this.getData();
      },
      getDate(data, dateString) {//获取日期
        this.par.start_date = dateString[0]
        this.par.end_date = dateString[1]
        this.getData()
      },
      reset() {//数据重置
        this.par.start_date = ''
        this.par.end_date = ''
        this.par.name = ''
        this.getData()
        // location.reload()

      }
    },
  }
</script>

<style scoped lang='less'>
  .top {
    font-size: 14px;
    span {
      margin-right: 50px;
    }
  }

  .table {
    padding: 10px 0;
  }
</style>
